<template>
	<div>
		<div class="template" v-show="loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class=''>
			<img src="../assets/seek.png">
			<input type="text" placeholder="搜索想要购买的宝贝" ref="goodsname"/>
			<span @click="seekon">搜索</span>
		</header>
		
		<div class="goodstype">
			<div class="goodstype_d">
				<div v-for='(item,index) in typelist' :class="name == item.name ?'on' :'typelist'" @click="typeliston(item.name,item.type)">{{item.name}}</div>
			</div>
		</div>
		<div class="hotseek"> 
			<div class="hotseek_d">热门搜索</div>
			<div class="hotseek_dd" v-for='(item,index) in seekName' v-if='name == index'><div v-for='items in item' @click="hotseekon(items.word)" :class="hotname == items.word ?'onn' :'hotseek_dd_u'">{{items.word}}</div></div>
		</div>
		
		
		<div class="hotseek"> 
			<div class="hotseek_d">历史记录</div>
			<div class="hotseek_dd"><div class="hotseek_dd_u" v-for="item in historyname" @click='history(item)'>{{item}}</div></div>
		</div>
		<div class="del" @click="del">清空搜索</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				typelist:[{name:'全部',type:''},{name:'京东',type:'jd'},{name:'友惠',type:'yh'},{name:'拼多多',type:'pdd'},{name:'淘宝',type:'hq'}],
				seekName:[],   //热门搜索列表
				type:'',            //搜索类型
				name:"全部",
				hotname:'',
				goodsname:'',
				historyname:[],
				loading:false,
				token:'',
			}
		},
		created(){
			var historyname = localStorage.getItem('goodsName');
			this.token = localStorage.getItem('token');
			var name = this.$route.query.name;
			var type = this.$route.query.type;
//			alert(name)
			if(name != undefined){
				this.name = unescape(name);
				this.type = unescape(type);
			}else{
				this.name = '全部';
				this.type = '';
			}
			
			//获取推广位
			var url = BaseUrl + 'tb/getTGWInfo?appId=wap' + '&token=' + this.token;
			this.$http.post(url).then(res=>{
//				console.log(res)
				if(res.data.code == '10000'){
					this.adazone_id = res.data.data.adazone_id;
					localStorage.setItem('adazone_id',this.adazone_id)
				}
			}).catch(error=>{
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			
			
			
			//搜索热词
			var url = BaseUrl + 'goods/wordTags';
			this.$http.post(url).then(res=>{
				this.seekName = res.data.data;
			}).catch(error=>{
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			
				this.historyname = historyname.split(",");
		},
		methods:{
			typeliston:function(name,type){
					this.name = name;
					this.type = type;
				}
			,
			//搜索
			seekon:function(){
				this.loading = true;
				this.goodsname = this.$refs.goodsname.value;
				if(this.goodsname != ''){
					//历史记录
					var goodsName = [];
					
					var localStoragename = localStorage.getItem('goodsName');
					if(localStoragename){
						var localStorageName = localStoragename.split(",")
						goodsName.push(this.goodsname);
						var goods = goodsName.concat(localStorageName);
						localStorage.setItem('goodsName',String(goods));
					}else{
						goodsName.push(this.goodsname);
						localStorage.setItem('goodsName',String(goodsName));
					}
					
						if(this.type != 'hq'){
							var url = BaseUrl + "goods/list?type=" + this.type + '&keyword=' + this.goodsname;
							this.$http.post(url).then(res=>{
								this.loading = false;
								if(res.data.code == '10000'){
									if(res.data.data.total !=0){
										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + this.goodsname})
									}else{
										Toast({
											message: "未找到商品",
											position: 'middle',
											duration: 2000
										});
									}
								}else{
									Toast({
										message: res.data.msg,
										position: 'middle',
										duration: 2000
									});
								}
								
								
							}).catch(error=>{
								this.loading = false;
								Toast({
									message: "网络异常",
									position: 'middle',
									duration: 3000
								})
							})
						}else if(this.type == 'hq'){
					var url = BaseUrl + 'tb/getfavitemByfavIds?adazone_id=' + this.adazone_id + '&q=' + this.goodsname + '&pageNo=1' + '&pageSize=10' + '&type=' + "";
							this.$http.post(url).then(res=>{
								this.loading = false;
								if(res.data.code == '10000'){
									if(res.data.data != ''){
										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + this.goodsname})
									}else{
										Toast({
											message:'未找到商品',
											position: 'middle',
											duration: 2000
										});
									}
								}else{
									Toast({
										message: res.data.msg,
										position: 'middle',
										duration: 2000
									});
								}
							}).catch(error=>{
								this.loading = false;
								Toast({
									message: "网络异常",
									position: 'middle',
									duration: 3000
								})
							})
				}
//						else{
//							var url = BaseUrl + 'tb/getwlbyq?adazone_id=' + this.adazone_id + '&q=' + this.goodsname + '&pageNo=1' + '&type=' + this.type + '&pageSize=10';
//							this.$http.post(url).then(res=>{
//								this.loading = false;
//								if(res.data.code == '10000'){
//									if(res.data.data != ''){
//										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + this.goodsname})
//									}else{
//										Toast({
//											message:'未找到商品',
//											position: 'middle',
//											duration: 2000
//										});
//									}
//								}else{
//									Toast({
//										message: res.data.msg,
//										position: 'middle',
//										duration: 2000
//									});
//								}
//							}).catch(error=>{
//								this.loading = false;
//								Toast({
//									message: "网络异常",
//									position: 'middle',
//									duration: 3000
//								})
//							})
//						}
					}else{
						this.loading = false;
						Toast({
							message: "搜索内容不能为空",
							position: 'middle',
							duration: 3000
						})
					}
			},
			//热门搜索
			hotseekon:function(hotname){
				this.loading = true;
				this.hotname = hotname;
				
				if(this.type != 'hq'){
					var url = BaseUrl + "goods/list?type=" + this.type + '&keyword=' + hotname;
					this.$http.post(url).then(res=>{
						this.loading = false;
						if(res.data.code == '10000'){
							if(res.data.data.total !=0){
								this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + hotname})
							}else{
								Toast({
									message: "未找到商品",
									position: 'middle',
									duration: 2000
								});
							}
						}else{
							Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 2000
							});
						}
					}).catch(error=>{
						this.loading = false;
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				}else if(this.type == 'hq'){
					var url = BaseUrl + 'tb/getCouponInfo?adazone_id=' + this.adazone_id + '&q=' + hotname + '&pageNo=1' + '&type=' + this.type + '&pageSize=10';
							this.$http.post(url).then(res=>{
								this.loading = false;
								if(res.data.code == '10000'){
									if(res.data.data != ''){
										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + hotname})
									}else{
										Toast({
											message:'未找到商品',
											position: 'middle',
											duration: 2000
										});
									}
								}else{
									Toast({
										message: res.data.msg,
										position: 'middle',
										duration: 2000
									});
								}
							}).catch(error=>{
								this.loading = false;
								Toast({
									message: "网络异常",
									position: 'middle',
									duration: 3000
								})
							})
				}
//				else{
//					var url = BaseUrl + 'tb/getwlbyq?adazone_id=' + this.adazone_id + '&q=' + this.hotname + '&pageNo=1' + '&type=' + this.type + '&pageSize=10';
//							this.$http.post(url).then(res=>{
//								this.loading = false;
//								if(res.data.code == '10000'){
//									if(res.data.data != ''){
//										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + this.hotname})
//									}else{
//										Toast({
//											message:'未找到商品',
//											position: 'middle',
//											duration: 2000
//										});
//									}
//								}else{
//									Toast({
//										message: res.data.msg,
//										position: 'middle',
//										duration: 2000
//									});
//								}
//							}).catch(error=>{
//								this.loading = false;
//								Toast({
//									message: "网络异常",
//									position: 'middle',
//									duration: 3000
//								})
//							})
//				}
			},
			//历史记录跳转
			history:function(name){
				this.loading = true;
				
				if(this.type != 'hq') {
					var url = BaseUrl + "goods/list?type=" + this.type + '&keyword=' + name;
					this.$http.post(url).then(res=>{
						this.loading = false;
						if(res.data.code == '10000'){
							if(res.data.data.total !=0){
								this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + name})
							}else{
								Toast({
									message: "未找到商品",
									position: 'middle',
									duration: 2000
								});
							}
						}else{
							Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 2000
							});
						}
					}).catch(error=>{
						this.loading = false;
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				}else if(this.type == 'hq'){
					var url = BaseUrl + 'tb/getCouponInfo?adazone_id=' + this.adazone_id + '&q=' + name + '&pageNo=1' + '&type=' + this.type + '&pageSize=10';
							this.$http.post(url).then(res=>{
								this.loading = false;
								if(res.data.code == '10000'){
									if(res.data.data != ''){
										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + name})
									}else{
										Toast({
											message:'未找到商品',
											position: 'middle',
											duration: 2000
										});
									}
								}else{
									Toast({
										message: res.data.msg,
										position: 'middle',
										duration: 2000
									});
								}
							}).catch(error=>{
								this.loading = false;
								Toast({
									message: "网络异常",
									position: 'middle',
									duration: 3000
								})
							})
				}
//				else{
//					var url = BaseUrl + 'tb/getwlbyq?adazone_id=' + this.adazone_id + '&q=' + name + '&pageNo=1' + '&type=' + this.type + '&pageSize=10';
//							this.$http.post(url).then(res=>{
//								this.loading = false;
//								if(res.data.code == '10000'){
//									if(res.data.data != ''){
//										this.$router.push({path:'/seekGoodsList?type=' + this.type + '&goodsName=' + name})
//									}else{
//										Toast({
//											message:'未找到商品',
//											position: 'middle',
//											duration: 2000
//										});
//									}
//								}else{
//									Toast({
//										message: res.data.msg,
//										position: 'middle',
//										duration: 2000
//									});
//								}
//							}).catch(error=>{
//								this.loading = false;
//								Toast({
//									message: "网络异常",
//									position: 'middle',
//									duration: 3000
//								})
//							})
//				}
				
				
			},
//			清空历史记录
			del:function(){
				this.historyname = [];
				localStorage.removeItem('goodsName');
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	header{
		background: #fff;
		display: flex;
		flex-direction:row; 
		align-items: center;
		padding: 0.2rem 0.15rem;
	}
	header img{
		width: 0.3rem;
		height: 0.3rem;
		position: absolute;
		top: 0.35rem;
		left: 0.4rem;
	}
	header input{
		width: 88%;
		height: 0.6rem;
		text-indent: 0.65rem;
		background: #d5d5d5;
		border-radius: 0.3rem;
		border: none;
		outline: none;
	}
	header span{
		color: #858585;
		font-size: 0.26rem;
		margin-left: 0.2rem;
	}
	
	.goodstype{	
		border-top: 1px solid #989898;
		border-bottom: 1px solid #989898;
		margin-bottom: 0.4rem;
		overflow-x: auto;
	}
	.goodstype_d{
		width:100%;
		padding: 0 0.4rem;
		display: flex;
	}
	.typelist{
		width: 2rem;
		height: 1rem;
		line-height: 1rem;
		color: #323232;	
		text-align: center;
	}
	.on{
		width: 2rem;
		height: 1rem;
		line-height: 1rem;
		color: #ff2040;	
		text-align: center;
		border-bottom: 1px solid #ff2040;
	}
	.hotseek{
		padding: 0 0.4rem;
	}
	.hotseek_d{
		color: #343434;
		font-size: 0.3rem;
	}
	.hotseek_dd {
		overflow: hidden;
	}
	.hotseek_dd_u{
		margin: 0.1rem 0.1rem;
		text-align: center;
		float: left;
		padding: 0.05rem  0.1rem ;
		border-radius:0.2rem ;
		color: #202020;
		border: 1px solid #202020;
	}
	.onn{
		margin: 0.1rem 0.1rem;
		text-align: center;
		float: left;
		padding: 0.05rem  0.1rem ;
		border-radius:0.2rem ;
		color: #ff2040;
		border: 1px solid #ff2040;
	}
	.del{
		text-align: center;
		color: #FF2040;
		font-size: 0.24rem;
	}
</style>